<template>
	<view class="loading">
		<view class="loading-content">
			<image class="loading-icon" src="@/static/loading.gif"></image>
			<view class="loading-text">{{title}}</view>
		</view>
		<view v-if="mask" class="cover"></view>
	</view>
</template>

<script>
	export default{
		name:'CustomLoading',
		data(){
			const getter=this.$store.getters;
			let mask=getter.loadingMask
			let title=getter.loadingTitle
			return{
				mask,
				title,
			}
		},
	}
</script>

<style lang="scss" scoped>
	.loading{
		.loading-content{
			position: fixed;
			transform: translate(-50%,-50%);
			left: 50%;
			top:50%;
			width: 250rpx;
			height: 250rpx;
			background: #4C4C4C;
			border-radius: 6px;
			z-index: 100;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.loading-icon{
				width: 60rpx;
				height: 60rpx;
			}
			.loading-text{
				color: #fff;
				margin-top: 30rpx;
			}
		}
		.cover{
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
		}
	}
</style>